# Menu Button Component

The menu button component is used to display buttons and perform actions in menus, typically used in toolbar menus, popup menus, and block-level menus.

## Example

See: https://demo.umodoc.com/components?lang=en-US

## Usage

```vue
<template>
  <umo-menu-button
    :ico="demoIcon"
    text="Example Button"
  />
</template>

<script setup>
import { UmoMenuButton } from '@umoteam/editor'

const demoIcon = `<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 6H8a2 2 0 0 0-2 2v8M16 42H8a2 2 0 0 1-2-2v-8M32 42h8a2 2 0 0 0 2-2v-8M32 6h8a2 2 0 0 1 2 2v8M32 24H16M24 32V16" stroke="var(--umo-error-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>`
</script>
```

## Props

### menuType

**Description**: The type of the menu.

**Possible Values**: `button`, `dropdown`, `select`, `popup`

**Type**: `String`

**Default Value**: `button`

### huge

**Description**: Whether to display as a large button.

**Type**: `Boolean`

**Default Value**: `false`

### ico

**Description**: The SVG icon for the menu, requires valid HTML.

**Type**: `string`

**Default Value**: `-`

### text

**Description**: The text displayed on the menu. When `tooltip` is not `false`, the value of `text` will also be displayed in the tooltip.

**Type**: `string`

**Default Value**: `''`

### hideText

**Description**: Whether to hide the text on the menu.

**Type**: `Boolean`

**Default Value**: `false`

### tooltip

**Description**: The text hint for the menu. If set to `false`, the tooltip will not be displayed.

**Type**: `[String, Boolean]`

**Default Value**: `undefined`

### shortcut

**Description**: The name of the shortcut key bound to the menu. It is displayed on the `tooltip`. Umo Editor internally handles the display of input shortcuts on different platforms, such as displaying `Ctrl+Shift+X` as `⌘+⇧+X` on macOS.

**Type**: `String`

**Default Value**: `undefined`

### shortcutText

**Description**: The shortcut key bound to the menu, displayed directly on the menu. Generally, `hideText` should be set to `false`, and the style of the displayed shortcut needs to be handled. This can be used for block-level menus and right-click menus, etc.

**Type**: `String`

**Default Value**: `undefined`

### selectOptions

**Description**: When `menuType` is `select` or `dropdown`, the configuration for the dropdown items.

**Type**: `Array`

**Default Value**: `-`

### selectValue

**Description**: When `menuType` is `select`, the selected value of the menu.

**Type**: `[String, Number]`

**Default Value**: `-`

### popupVisible

**Description**: When `menuType` is `popup`, whether to display the Popup.

**Type**: `Boolean`

**Default Value**: `false`

### popupHandle

**Description**: When `menuType` is `popup`, which area of the menu button opens the Popup when clicked. By default, the entire button is clicked.

**Possible Values**: `arrow`, i.e., click the arrow to open the Popup.

**Type**: `Boolean`

**Default Value**: `false`

### menuActive

**Description**: Whether the menu button is in an active state.

**Type**: `Boolean`

**Default Value**: `false`

### disabled

**Description**: Whether the menu button is disabled.

**Type**: `Boolean`

**Default Value**: `false`

### Others

Umo Editor uses [TDesign Vue Next](https://tdesign.tencent.com/vue-next/overview-en) as its base component library, and the menu button supports most of the properties of the components used in TDesign Vue Next.

## Slots

### default

**Description**: The default slot for the menu button, where you can place the content of the menu button, including the default content for `select`, `dropdown`, `popup`, etc. components.

### dropmenu

**Description**: When `menuType` is `dropdown`, the content of the popup menu for the menu button. See: https://tdesign.tencent.com/vue-next/components/dropdown-en?tab=api

### content

**Description**: When `menuType` is `popup`, the content of the popup for the menu button. See: https://tdesign.tencent.com/vue-next/components/popup-en?tab=api

### Others

Umo Editor uses [TDesign Vue Next](https://tdesign.tencent.com/vue-next/overview-en) as its base component library, and the menu button supports most of the slots of the components used in TDesign Vue Next.

## Events

### menuClick

**Description**: Triggered when the menu button is clicked.

### Others

Umo Editor uses [TDesign Vue Next](https://tdesign.tencent.com/vue-next/overview-en) as its base component library, and the menu button supports most of the events of the components used in TDesign Vue Next.
